<template>
  <el-tabs
    v-model="editableTabsValue"
    type="card"
    editable
    class="demo-tabs"
    @tab-click="messageTab"
    @edit="handleTabsEdit"
  >
    <template #add-icon>
      <el-icon><RefreshRight /></el-icon>
    </template>
    <el-tab-pane
      v-for="item in useMessage().editableTabs"
      :key="item.sessionId"
      :label="item.nickname"
      :name="String(item.userId)"
    >
      <template #label>
        <span class="custom-tabs-label">
          <!-- <el-badge :value="200" :max="9" class="item" :offset="[10, -4]"> -->
          <span>{{ item.nickname }}</span>
          <!-- </el-badge
          > -->
        </span>
      </template>

      <div v-loading="loading"><Chat /></div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import type { TabPaneName, TabsPaneContext } from "element-plus";
import Chat from "../cs/demo.tsx";
import { getMessageList, getUserMessageList } from "@/api/marketers/message/message";
import type { number } from "echarts/core";
import { useMessage } from "@/stores/counter";
import { getUser } from "@/api/system/user/user.ts";
const loading = ref(false);
const editableTabsValue = ref();
// 消息列表初始化
async function getMessage() {
  await getMessageList().then((response) => {
    useMessage().editableTabs = response.data.data;
  });
  if (useMessage().userId == undefined) {
    useMessage().userId = useMessage().editableTabs[0].userId;
  }
  editableTabsValue.value = String(useMessage().userId);

  if (useMessage().userId != undefined) {
    loadMessageList();
    getUserInfo();
  }
}
async function getUserInfo() {
  console.log(Number(useMessage().userId));
  await getUser(Number(useMessage().userId)).then((response) => {
    useMessage().roleInfo.duifang.name =
      response.data.data.nickname + "  " + response.data.data.username;
    useMessage().roleInfo.duifang.avatar = response.data.data.avatar;
  });
}

async function loadMessageList() {
  loading.value = true;
  let data: any[] = [];
  useMessage().message = [];
  await getUserMessageList(Number(useMessage().userId)).then((response) => {
    data = response.data.data;
  });
  data.forEach((item) => {
    if (item.isFromUser == 1) {
      const newAssistantMessage = {
        role: "duifang",
        id: item.id,
        createAt: Date.now(),
        content: item.content,
      };
      useMessage().message = [...useMessage().message, newAssistantMessage];
    } else {
      const newAssistantMessage = {
        role: "user",
        id: item.id,
        createAt: Date.now(),
        content: item.content,
      };
      useMessage().message = [...useMessage().message, newAssistantMessage];
    }
  });
  getUserInfo();
  loading.value = false;
}
//当tab选择时触发
const messageTab = async (pane: TabsPaneContext, ev: Event) => {
  useMessage().userId = Number(pane.paneName);
  useMessage().roleInfo.duifang.name = "用户" + String(pane.paneName);
  loadMessageList();
};

const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: "remove" | "add"
) => {
  if (action === "remove") {
    const tabs = useMessage().editableTabs;
    let activeName = editableTabsValue.value;
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (String(tab.userId) === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1];
          console.log(nextTab);
          if (nextTab) {
            activeName = String(nextTab.userId);
          }
        }
      });
    }
    editableTabsValue.value = activeName;
    useMessage().editableTabs = tabs.filter((tab) => String(tab.userId) !== targetName);
  }
  loadMessageList();
};

getMessage();
</script>

<style lang="less">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.is-closable {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.semi-chat {
  width: auto;
  max-width: none;
}
</style>
